<template>
  <div class="machine-img" v-loading="subLoading">
    <div class="list" v-show="!subLoading">
      <div
        class="machine-box"
        ref="machineGrid"
        v-for="(item, index) in GridList"
        :key="item.id"
        @click="handlerSelect(index)"
        :class="selected == index + 1 ? 'colorBorder' : null"
      >
        <div class="postion">
          {{ index + 1 }}
        </div>
         <el-tooltip class="item" effect="dark" content="禁用" placement="left-start">
        <div class="posttion_disabled" v-if="item.status == 1">
          <i
            class="iconfont icon-jinyong"
            :style="{
                fontSize:width > 200 ? 140+'px' : 100 +'px' ,
                 color: '#e6e6e6'
            }"
          ></i>
        </div>
         </el-tooltip>
        <div class="direction">
          <i class="el-icon-bottom"></i>
        </div>
        <el-tooltip
          placement="right"
          v-for="child in glassList.filter((e) => e.grid == index + 1)"
          :key="child.id"
        >
          <div slot="content">
            ID: {{ child.id }}<br /><br />
            客户: {{ child.clientName }}<br /><br />
            尺寸: {{ child.furInWidth }} * {{ child.furInHeight }}
          </div>
          <div
            class="glass"
            :style="{
              width: width * (child.furInWidth / proportion[radio * 1].width) + 20 + 'px',
              height:
                height * (child.furInHeight / proportion[radio * 1].height) + 10 + 'px',
            }"
          >
            <div class="glassID">
              {{child.id}}
            </div>
          </div>
        </el-tooltip>
      </div>
      <div class="machine-box" style="border: none">
        <img src="@/assets/images/lplPhoto.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { machineList } from "@/api/assembly/machine";
import { proportion } from "@/views/dmonitor/machine/config/radio";
export default {
  model: {
    prop: "selected",
    event: "change",
  },
  props: {
    selected: {
      type: Number,
      default: 0,
    },
    glassList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    radio: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      GridList: [],
      subLoading: true,
      proportion,
      width: null,
      height: null,
    };
  },
  watch:{
    radio(){
       this.subLoading = true
       this.initGrid();
    }
  },
  methods: {
    async initGrid() {
      const res = await machineList({ type: this.radio });
      this.GridList = res.rows;
      this.subLoading = false;
      this.$nextTick(() => {
        this.initGirdRule();
      });
    },
    initGirdRule() {
      this.width = this.$refs.machineGrid[0].offsetWidth || 0;
      this.height = this.$refs.machineGrid[0].offsetHeight || 0;
    },
    handlerSelect(index) {
      let value = this.selected == index + 1 ? 0 : index + 1;
      this.$emit("change", value);
    },
  },
  created() {
    this.subLoading = true
    this.initGrid();
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.machine-img {
  position: relative;
  width: 30%;
  border-right: 1px dashed #e6e6e6;
  .list {
    width: 100%;
    height: 100%;
    padding: 5px 5px 5px 0;
    display: flex;
    flex-wrap: wrap;
  }
  .machine-box {
    position: relative;
    width: calc(49% - 4px);
    height: calc(20% - 4px);
    border: 2px solid black;
    margin-right: 1%;
    cursor: pointer;
    padding: 2px 0px 0px 2px;
    .postion {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 60px;
      font-weight: bold;
      color: #e6e6e6;
      z-index: 0;
    }
    .direction {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 20px;
      font-weight: bold;
      // color: #e6e6e6;
      z-index: 1;
    }
    .glass {
      position: relative;
      background-color: #409eff;
      margin-bottom: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: bold;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 15%);
      padding: 2px;
      z-index: 3;
      .glassID{
        font-size: 12px;
      }
      .rule {
        flex: 1;
      }
      .clientName {
        flex: 1;
        display: flex;
        margin-left: auto;
        align-items: flex-end;
      }
    }
    .posttion_disabled {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
    img {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      height: 100%;
    }
  }
  .colorBorder {
    border: 2px solid red;
  }
}
</style>